<template>
<!-- style="background:#243857;" -->
  <a-layout-sider style="background:#243857;margin-top:-3px;">
    <a-menu mode="inline" :open-keys="openKeys" :default-selected-keys="openKeys"
    @openChange="onOpenChange" class="custom-menu" @click="handleMenuClick">
      <!-- 遍历导航栏数据 -->
      <template v-for="item in navItems">
        <!-- 如果有子菜单，使用 a-sub-menu -->
        <a-sub-menu v-if="item.children && item.children.length" :key="item.id" >
          <template #title>
             <a-icon type="mail" />
            <span>{{ item.name }}</span>
          </template>
          <!-- 遍历子菜单 -->
          <a-menu-item v-for="child in item.children" :key="child.id" >
            {{ child.name }}
          </a-menu-item>
        </a-sub-menu>
        <!-- 如果没有子菜单，直接使用 a-menu-item -->
        <a-menu-item v-else :key="item.id" >
           <a-icon type="mail" />
          {{ item.name }}
        </a-menu-item>
      </template>
    </a-menu>
  </a-layout-sider>
</template>
<script>
export default {
  data() {
    return {
      d:["sub1"],
      rootSubmenuKeys: ['sub1', 'sub2', 'sub3',"sub4"],
      openKeys: ['sub1'],
       navItems: [
        {
          id: "sub1",
          name: "首页",
          description: "Welcome to the home page",
          url: "/",
        },
        {
          id: "sub2",
          name: "用户分析",
          description: "About us page",
          children: [
            
            {
              id: "2-2",
              name: "综合分析",
              description: "Our history",
              url: "/about",
            },
          ],
        },
        {
          id: "sub3",
          name: "产品订购",
          description: "Contact us page",
          url: "/other",
        },
      ], // 导航栏数据
    };
  },
   created() {
    // this.fetchNavItems()
    this.openKeys = JSON.parse(localStorage.getItem("openKeys"))  || ["1"];

  },
  methods: {
       handleMenuClick({ key }) {
      // 清空其他展开的子菜单
      localStorage.setItem("openKeys", JSON.stringify([key]));
      // 查找选中的菜单项（包括子菜单项）
      const selectedItem = this.findItemById(this.navItems, key);
      if (selectedItem) {
        if (selectedItem.url === this.$route.path) {
          return;
        }
        // this.$emit('select-item', selectedItem)
        this.$router.push({ path: selectedItem.url });
      }
    },
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1);
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys;
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : [];
      }
    },
        // 递归查找菜单项
    findItemById(items, id) {
      for (const item of items) {
        if (item.id === id) {
          return item;
        }
        if (item.children && item.children.length) {
          const found = this.findItemById(item.children, id);
          if (found) {
            return found;
          }
        }
      }
      return null;
    },
  },
};
</script>


<style scoped lang="scss">
::v-deep .ant-menu-inline, ::v-deep .ant-menu-sub {
  background-color:#243857 !important;
}
::v-deep .ant-menu-submenu-title {
  width:100% !important;
}
/* 自定义菜单样式 */
.custom-menu {
  width:201px;
  background-color: #243857; /* 修改菜单背景颜色 */
  line-height: 40px; /* 调整菜单高度 */
  border-bottom: none; /* 去掉默认的底部边框 */
  color: #B8C0CC;
  .ant-menu-item {
    // background-color: #243857; /* 修改菜单背景颜色 */
    color: #B8C0CC;
    font-weight: 500;
  }
    .ant-menu-submenu-title {
    background-color: #243857; /* 修改菜单背景颜色 */
    color: #B8C0CC;
    font-weight: 500;
  }
  .ant-menu-item-selected {
    background-color: #006699 !important; /* 选中背景颜色 */
    color: #fff; /* 选中文字颜色 */
    border: none !important; /* 移除选中状态的边框 */
    width:100%;
  }

  .ant-menu-item-selected::after {
    display: none;

}
.ant-menu-submenu-inline{
  width:100%;
}
  .ant-menu-item:hover {
    color: #f9f9f9;
    background: #162436;
     width:100%;
  }

  .ant-menu-inline .ant-menu-item, .ant-menu-inline .ant-menu-submenu-title{
    width:100% !important;
  }
  .ant-menu-item:active{
    width:100%;
  }

.ant-menu-inline {
  border: none;
}
}
</style>